<template>
  <div class="profile">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="user-info">
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
              <el-button type="text" @click="showEditDialog">编辑</el-button>
            </div>
          </template>
          <div class="info-item">
            <label>用户名：</label>
            <span>{{ userInfo.username }}</span>
          </div>
          <div class="info-item">
            <label>邮箱：</label>
            <span>{{ userInfo.email }}</span>
          </div>
          <div class="info-item">
            <label>注册时间：</label>
            <span>{{ formatDate(userInfo.createTime) }}</span>
          </div>
          <div class="stats">
            <div class="stat-item">
              <div class="stat-value">{{ userInfo.postCount || 0 }}</div>
              <div class="stat-label">帖子</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ userInfo.followingCount || 0 }}</div>
              <div class="stat-label">关注</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ userInfo.followerCount || 0 }}</div>
              <div class="stat-label">粉丝</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="16">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="我的帖子" name="posts">
            <div class="posts-list">
              <el-card v-for="post in userPosts" :key="post.id" class="post-card">
                <template #header>
                  <div class="post-header">
                    <h3 class="post-title" @click="viewPostDetail(post.id)">{{ post.title }}</h3>
                    <div class="post-meta">
                      <span>{{ formatDate(post.createTime) }}</span>
                      <el-button type="text" @click="deletePost(post.id)" class="delete-btn">
                        删除
                      </el-button>
                    </div>
                  </div>
                </template>
                <div class="post-content">{{ post.content }}</div>
                <div class="post-footer">
                  <span>
                    <el-icon><ThumbsUp /></el-icon> {{ post.likes || 0 }}
                  </span>
                  <span>
                    <el-icon><ChatLineRound /></el-icon> {{ post.comments || 0 }}
                  </span>
                </div>
              </el-card>

              <div v-if="userPosts.length === 0" class="no-posts">
                暂无帖子
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <!-- 编辑个人信息对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑个人信息" width="40%">
      <el-form :model="editForm" :rules="rules" ref="editForm" label-width="80px">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="editForm.newPassword" type="password" placeholder="不修改请留空"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleEdit" :loading="updating">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ThumbsUp, ChatLineRound } from '@element-plus/icons-vue'

export default {
  name: 'ProfilePage',
  components: {
    ThumbsUp,
    ChatLineRound
  },
  data() {
    return {
      userInfo: {},
      userPosts: [],
      activeTab: 'posts',
      editDialogVisible: false,
      updating: false,
      editForm: {
        email: '',
        newPassword: ''
      },
      rules: {
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        newPassword: [
          { min: 6, message: '密码长度不能小于6个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetchUserInfo()
    this.fetchUserPosts()
  },
  methods: {
    formatDate(date) {
      return new Date(date).toLocaleString()
    },
    async fetchUserInfo() {
      try {
        const response = await axios.get('/api/users/profile')
        this.userInfo = response.data
      } catch (error) {
        ElMessage.error('获取用户信息失败')
      }
    },
    async fetchUserPosts() {
      try {
        const response = await axios.get('/api/users/posts')
        this.userPosts = response.data
      } catch (error) {
        ElMessage.error('获取帖子列表失败')
      }
    },
    showEditDialog() {
      this.editForm.email = this.userInfo.email
      this.editForm.newPassword = ''
      this.editDialogVisible = true
    },
    async handleEdit() {
      try {
        await this.$refs.editForm.validate()
        this.updating = true
        await axios.put('/api/users/profile', this.editForm)
        ElMessage.success('更新成功')
        this.editDialogVisible = false
        await this.fetchUserInfo()
      } catch (error) {
        ElMessage.error(error.response?.data?.message || '更新失败')
      } finally {
        this.updating = false
      }
    },
    viewPostDetail(postId) {
      this.$router.push(`/post/${postId}`)
    },
    async deletePost(postId) {
      try {
        await ElMessageBox.confirm('确定要删除这篇帖子吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await axios.delete(`/api/posts/${postId}`)
        ElMessage.success('删除成功')
        await this.fetchUserPosts()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('删除失败')
        }
      }
    }
  }
}
</script>

<style scoped>
.profile {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  margin-bottom: 20px;
}

.info-item {
  margin-bottom: 15px;
}

.info-item label {
  color: #909399;
  margin-right: 10px;
}

.stats {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #EBEEF5;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.post-card {
  margin-bottom: 20px;
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-title {
  margin: 0;
  cursor: pointer;
  color: #409EFF;
}

.post-title:hover {
  text-decoration: underline;
}

.post-meta {
  font-size: 14px;
  color: #909399;
  display: flex;
  align-items: center;
  gap: 15px;
}

.post-content {
  margin: 10px 0;
  color: #606266;
}

.post-footer {
  margin-top: 10px;
  display: flex;
  gap: 20px;
  color: #909399;
}

.no-posts {
  text-align: center;
  color: #909399;
  padding: 40px 0;
}

.delete-btn {
  color: #F56C6C;
}

.delete-btn:hover {
  color: #f78989;
}
</style> 